const h = (tag, props, children) => {
  return {
    tag,
    props,
    children
  }
}

// 挂载
const mount = (vNode, container) => {


  if (typeof vNode === 'string') {
    // console.log(vNode)
    // container.append(vNode)
    // console.log(container)

    return false
  }

  // 处理Vnode第一个参数 el
  const el = vNode.el = document.createElement(vNode.tag)

  // 处理Vnode第二个参数 props

  if (vNode.props) {
    for (const key in vNode.props) {
      const value = vNode.props[key]

      if (key.startsWith('on')) { //对事件监听的判断
        el.addEventListener(key.slice(2).toLowerCase(), value)
        console.log(el.addEventListener);
        console.log(container);
      } else el.setAttribute(key, value)

    }
  }

  // 处理Vnode第二个参数 props
  // 判断第三个参数是否也是个vNOde
  if (vNode.children) {
    if (typeof vNode.children !== 'string') {
      // console.log(vNode.children);

      vNode.children.forEach(item => {
        // console.log(item);
        // console.log(el);
        mount(item, el)
      })
    }
    else el.textContent = vNode.children
  }

  container.appendChild(el)
}

// 更新
const patch = (n1, n2) => {

  // 如果标签不一样，直接替换
  if (n1.tag !== n2.tag) {
    const n1ElParent = n1.el.parentElement
    n1ElParent.removeChild(n1.el)
    mount(n2, n1ElParent)
  } else {

    // 1.取出element对象，并在n2中进行保存
    const el = n2.el = n1.el

    // 2.处理props
    const oldProps = n1.props || {}
    const newProps = n2.props || {}

    // 2.1.获取所有的newProps添加到el
    for (const key in newProps) {
      const newValue = newProps[key]
      const oldValue = oldProps[key]
      if (newValue !== oldValue) {
        // console.log(newProps[key]);
        if (key.startsWith('on')) { //包含对事件监听的判断
          el.removeEventListener(key.slice(2).toLowerCase(), oldValue)
          el.addEventListener(key.slice(2).toLowerCase(), newValue)
        } else el.setAttribute(key, newValue)
      }
    }

    // 2.2.删除旧的props
    for (const key in oldProps) {
      const noldValue = oldProps[key]

      if (!(key in newProps)) {
        if (key.startsWith('on')) {
          el.removeEventListener(key.slice(2).toLowerCase(), noldValue)
        } else el.removeAttribute(key)
      }
    }

    // 处理children
    const oldChildren = n1.children || []
    const newChildren = n2.children || []

    if (typeof newChildren === 'string') { // 第一种情况，newChildren是string
      if (typeof oldChildren === 'string') {
        if (oldChildren !== newChildren) {
          el.textContent = newChildren
        }
      } else el.innerHTML = newChildren
    } else { //第二种情况，newChildren是数组
      if (typeof oldChildren === 'string') {
        el.textContent = ''
        // console.log(el);
        newChildren.map(item => {
          mount(item, el)
        })
      } else {
        //  [v1, v2, v4]   [v1, v2, v5, v6]           先截取oldChildren和newChildren共同长度的Vnode进行patch();此例子共同长度为3
        // oldChildren.length > newChildren.length ： 删除oldChildren多出的Vnode
        // oldChildren.length = newChildren.length ： Vnode直接进行patch()
        // oldChildren.length < newChildren.length ： 添加newChildren新增的Vnode

        // 获取oldChildren和newChildren数组的共同长度
        const commonLength = Math.min(oldChildren.length, newChildren.length)
        for (let i = 0; i < commonLength; i++) {
          patch(oldChildren[i], newChildren[i])
        }
        if (oldChildren.length > newChildren.length) {
          oldChildren.slice(commonLength).forEach(item => {
            el.removeChild(item.el)
          })
        }

        if (oldChildren.length < newChildren.length) {
          newChildren.slice(commonLength).forEach(item => {
            mount(item, el)
          })
        }
      }
    }
  }

}